<template>
  <div class="component-areaCode">
    <el-row>
      <el-cascader
        ref="cascaderAddr"
        v-model="options"
        :options="initOptions"
        clearable
        :disabled="disabled"
        filterable
        :props="props"
        placeholder="选择地区"
        @change="districtChange"
      />
    </el-row>
  </div>
</template>
<style scoped>
</style>
<script>
export default {
  props: ['value', 'readOnly', 'imme', 'mark', 'dlevel'],
  data() {
    const _this = this
    return {
      options: [],
      initOptions: [],
      disabled: _this.readOnly,
      lalm: _this.imme,
      props: {
        checkStrictly: true,
        lazy: true,
        lazyLoad(node, resolve) {
          const nodeid = node.value
          let nodes = []
          _this.$http
            .get('api/frame/fwArea/queryByParent', { parentId: nodeid })
            .then((res) => {
              _this.loading = false
              nodes = Array.from(res).map((item) => {
                const ret = {
                  value: item.id,
                  label: item.name
                }
                if (
                  _this.dlevel !== undefined &&
                  _this.dlevel.indexOf(item.level + ',') > -1
                ) {
                  ret.disabled = 'disabled'
                }
                if (item.level === 4) {
                  ret.leaf = true
                }
                return ret
              })
              // 通过调用resolve将子节点数据返回，通知组件数据加载完成
              resolve(nodes)
            })
            .catch((error) => {
              console.log(error)
              _this.loading = false
            })
        }
      }
    }
  },
  watch: {
    value: {
      handler: function(newVal) {
        if (newVal && newVal.length > 0) {
          if (window.isNaN(newVal[3])) {
            this.options = newVal.slice(0, 3)
          } else if (window.isNaN(newVal[2])) {
            this.options = newVal.slice(0, 2)
          } else if (window.isNaN(newVal[1])) {
            this.options = newVal.slice(0, 1)
          } else {
            this.options = newVal
          }
        } else {
          this.options = []
        }
        if (this.mark === 'remoteSelect') {
          this.getArea(this.options)
        }
      }
      // immediate: this.lalm !== "false",
    }
  },
  created() {
    // this.getArea()
  },
  methods: {
    // 选择地区
    districtChange() {
      const value = []
      const chileNode = this.$refs['cascaderAddr'].getCheckedNodes()
      let code = ''
      let area = ''
      if (chileNode.length > 0) {
        if (chileNode[0].parent) {
          if (chileNode[0].parent.parent) {
            if (chileNode[0].parent.parent.parent) {
              area =
                chileNode[0].parent.parent.parent.label +
                ',' +
                chileNode[0].parent.parent.label +
                ',' +
                chileNode[0].parent.label +
                ',' +
                chileNode[0].label
              code =
                chileNode[0].parent.parent.parent.value +
                ',' +
                chileNode[0].parent.parent.value +
                ',' +
                chileNode[0].parent.value +
                ',' +
                chileNode[0].value
            } else {
              area =
                chileNode[0].parent.parent.label +
                ',' +
                chileNode[0].parent.label +
                ',' +
                chileNode[0].label
              code =
                chileNode[0].parent.parent.value +
                ',' +
                chileNode[0].parent.value +
                ',' +
                chileNode[0].value
            }
          } else {
            area = chileNode[0].parent.label + ',' + chileNode[0].label
            code = chileNode[0].parent.value + ',' + chileNode[0].value
          }
        } else {
          area = chileNode[0].label + ','
          code = chileNode[0].value + ','
        }
      }
      console.log(code, area, '最终的结果')
      for (let i = 0; i < code.split(',').length; i++) {
        value.push({
          code: code.split(',')[i],
          name: area.split(',')[i]
        })
      }
      this.$emit('input', value)
    },
    getArea(nodeids) {
      nodeids.forEach((item) => {
        this.$fetchData(
          this.$api.fwArea.queryByParent,
          { parentId: item },
          'get'
        )
          .then((res) => {
            this.loading = false
            this.initOptions = res.map((item) => {
              return {
                value: item.id,
                label: item.name
              }
            })
          })
          .catch((error) => {
            console.log(error)
            this.loading = false
          })
      })
    }
  }
}
</script>
<style lang="scss">
.component-areaCode {
  .el-row {
    margin-bottom: 0px;
    .el-cascader {
      line-height: 32px;
      height: 32px;
    }
  }
}
</style>
